<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8" name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<title>Document</title>
	<link rel="stylesheet" href="css/shouye.css">
		<link rel="stylesheet" type="text/css" href="css/index.css"/>
		<style type="text/css">
			.box p{
				margin: 0 auto;
			}
			body{
				height: 50.2rem;
			}
			.fu{
				position: fixed;
				width: 100%;
				top:1.2rem;
				position: relative;
			}
			.lunbo{
				position: relative;
			}
		</style>
</head>
<body>
	<div class="box">
		<p>走秀首页</p>
	</div>
	<div class="lunbo">
		<ul id="ul"> 
			<li><img src="img/tupian1.png"></li>
			<li><img src="img/tupian2.png"></li>
			<li><img src="img/tupian3.png"></li>
			<li><img src="img/tupian4.png"></li>
		</ul>
		<ol id="ol">
				<li></li>
				<li></li>
				<li></li>
				<li></li>
			</ol>
	</div>
	<div class="biaoqian">
		<p>热门品牌</p>
	</div>
	<div class="banner">
		<ul>
			<li><img src="img/tupian2.png"></li>
			<li><p>芬迪</p><span>芬迪新品上线</span></li>
			<li><p>1.8折</p></li>
			<li><img src="img/tupian5.png"></li>
		</ul>
		<ul>
			<li><img src="img/tupian3.png"></li>
			<li><p>D2C</p><span>D2C新品上线</span></li>
			<li><p>1.8折</p></li>
			<li><img src="img/tupian5.png"></li>
		</ul>
		<ul class="a">
			<li><img src="img/tupian4.png"></li>
			<li><p>博柏利</p><span>博柏利新品上线</span></li>
			<li><p>1.8折</p></li>
			<li><img src="img/tupian5.png"></li>
		</ul>
	</div>
	<div class="tab">
		<a href="#">
			<img src="img/index-shou.png"/>
			<p>首页</p>
		</a>
		<a href="#">
			<img src="img/index-sou.png"/>
			<p>搜索</p>
		</a>
		<a href="#">
			<img src="img/index-xiu.png"/>
			<p>我的秀</p>
		</a>
		<a href="#">
			<img src="img/index-gou.png"/>
			<p>购物车</p>
		</a>
		<a href="#">
			<img src="img/index-geng.png"/>
			<p>更多</p>
		</a>
		
	</div>
	<script src="js/jquery-1.12.4.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/flexible.debug.js"></script>
	<script src="js/flexible_css.debug.js"></script>
	<script src="js/quanju.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
	$('.tab a').eq(0).children('img').attr("src","img/index-shoub.png")
	var a = $('.biaoqian').offset();
	var b= $('.biaoqian')
	
	var a = $('.biaoqian').offset();
	$(document).on('scroll',function(){
		var	c = $(document).scrollTop();
		if(a.top<=c){
			b.css({'position':'fixed','top':'0'})
			}else{
				b.css({'position':'relative','top':'1.2rem'})
				}
		})
	
	
	var f = $('.biaoqian').scrollTop()
	console.log(a)
	console.log(b)
	console.log(d)
	
	
	$('.tab a').eq(0).addClass('taba').children('img').attr("src","img/index-shoub.png")
			var lunbo=document.getElementsByClassName('lunbo'),
      	     ul=document.getElementById('ul').getElementsByTagName('li'),
      	     ol=document.getElementById('ol').getElementsByTagName('li'),
      	     
      	     i=0,
      	     timer,
      	     index=0;
      	     function auto(){
                for(var j=0;j<ul.length;j++){
                	ul[j].style.display="none"
                	ol[j].style.background="red"
                }
                ul[i].style.display="block"
                ol[i].style.background="#ccc"
                i++;
                if(i>=ul.length){
                	i=0
                }
      	     }
      	    timer=setInterval(auto,1000)
      	    for(var z=0;z<ol.length;z++){
      	    	ol[z].index=z;
      	    	ol[z].onclick=function(){
      	    		for(var m=0;m<ol.length;m++){
                        ul[m].style.display="none"
                        ol[m].style.background="red"
      	    		}
      	    		ul[this.index].style.display="block"
      	    		ol[this.index].style.background="#ccc"
      	    	}
                  ol[z].onmouseenter=function(){
                  	clearInterval(timer)
                  }
                  ol[z].onmouseleave=function(){
                  	timer=setInterval(auto,1000)
                  	i=this.index
                  }
      	    }
      	    $('.banner ul').eq(0).click(function(){
      	    	location.href='fendi.html'
      	    })
      	    
		</script>
</body>
</html>